<template>
  <div class="xtx-pagination" v-show="total > 0">
    <a
      href="javascript:;"
      @click="currentPage = 1"
      :class="{ disabled: currentPage === 1 }"
      >首页</a
    >
    <a href="javascript:;" @click="currentPage--" v-if="currentPage !== 1">
      上一页
    </a>
    <a v-else href="javascript:;" class="disabled">
      上一页
    </a>
    <span v-if="pager.start !== 1">...</span>
    <a
      href="javascript:;"
      v-for="item in pager.btnArr"
      :key="item"
      :class="{ active: item === currentPage }"
      @click="currentPage = item"
    >
      {{ item }}
    </a>
    <span v-if="pager.end !== pager.totalPage">...</span>
    <a
      href="javascript:;"
      class="disabled"
      v-if="currentPage === pager.totalPage"
    >
      下一页
    </a>
    <a v-else href="javascript:;" @click="currentPage++">
      下一页
    </a>
    <a
      href="javascript:;"
      @click="currentPage = pager.totalPage"
      :class="{ disabled: currentPage === pager.totalPage }"
      >尾页</a
    >
  </div>
</template>
<script>
import { computed, ref, watch } from 'vue'
export default {
  name: 'XtxPagination',
  props: {
    // 当前页
    page: {
      type: Number,
      default: 1
    },
    // 每页显示的条数
    pageSize: {
      type: Number,
      default: 10
    },
    // 总的条数
    total: {
      type: Number,
      default: 100
    },
    // 分页总共显示几个页码按钮 默认是5
    pageNum: {
      type: Number,
      default: 5
    }
  },
  setup(props, { emit }) {
    // 组件提供了currentPage属性
    const currentPage = ref(0)
    watch(
      () => props.page,
      value => {
        currentPage.value = value
      },
      {
        immediate: true
      }
    )
    // 组件需要计算的值
    const pager = computed(() => {
      // 1. 计算总页数
      const totalPage = Math.ceil(props.total / props.pageSize)
      // 1. 理想状态
      let start = currentPage.value - parseInt(props.pageNum / 2) // 2
      let end = start + props.pageNum - 1
      // 2. start是负数
      if (start < 1) {
        start = 1
        end =
          start + props.pageNum - 1 > totalPage
            ? totalPage
            : start + props.pageNum - 1
      }
      // 3. end超出的情况
      if (end > totalPage) {
        end = totalPage
        // 9
        start = end - props.pageNum + 1 < 1 ? 1 : end - props.pageNum + 1
      }

      const btnArr = []
      for (let i = start; i <= end; i++) {
        btnArr.push(i)
      }
      return {
        btnArr,
        start,
        end,
        totalPage
      }
    })

    watch(currentPage, value => {
      emit('current-change', value)
    })
    return {
      pager,
      currentPage
    }
  }
}
</script>
<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>
